<script setup lang="ts">

import {INextGrade, useNextGrade} from "../hooks/useNextGrade";
import {Avatar, Warning} from "@element-plus/icons-vue";

const {reach_select, plan, isSuccess} = useNextGrade()

const {data, grade} = defineProps<{
  data: INextGrade
  grade: number
}>()
const format = (percentage: number) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<template>
  <div class="next-header">
    <el-text class="next-grade-text-size">距离下一等级</el-text>
    <el-button class="next-right-btn">升级说明</el-button>
  </div>
  <div class="next-grade-box">
    <div class="next-grade-left">
      <div class="next-body">
        <el-image class="dis-area-flex" :src="reach_select(grade>=data.score*5)"/>
        <div class="progress-box">
          <el-text>创作分</el-text>
          <el-progress class="progress-length" :percentage="plan(grade,data.score)" :format="format"/>
        </div>
        <div class="js-box">
          <el-text class="js-text">创作分是资源量、浏览量、下载量和综合贡献组成的分值总合</el-text>
        </div>
        <div class="jd-box">
          <div class="jd-sim jd-sim-jd-size jd-first-margin-top">
            <div class="jd-content">
              <el-text class="jd-text-margin10">资源量</el-text>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="提示: 每上传1个资源（审核通过）+5分 若自行或被平台删除及下架则扣除对应分数，分数实时更新"
                  placement="bottom"
              >
                <el-icon class="icon-style">
                  <Warning/>
                </el-icon>
              </el-tooltip>
              <el-progress
                  :percentage="plan(grade,data.zy)"
                  :stroke-width="15"
                  :status="isSuccess(grade,data.zy)"
              />
            </div>
            <div class="jd-content">
              <el-text class="jd-text-margin10">阅读量</el-text>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="提示：上传资源每获得10次有效阅读+1分；历史数据自2020年起计算，分数每日更新"
                  placement="bottom"
              >
                <el-icon class="icon-style">
                  <Warning/>
                </el-icon>
              </el-tooltip>
              <el-progress
                  :percentage="plan(grade,data.yd)"
                  :stroke-width="15"
                  :status="isSuccess(grade,data.yd)"
              />
            </div>
          </div>
          <div class="jd-sim jd-sim-jd-size">
            <div class="jd-content">
              <el-text class="jd-text-margin10">下载量</el-text>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="提示：上传资源每获得1次有效下载+5分；分数次日更新"
                  placement="bottom"
              >
                <el-icon class="icon-style">
                  <Warning/>
                </el-icon>
              </el-tooltip>
              <el-progress
                  :percentage="plan(grade,data.xz)"
                  :stroke-width="15"
                  :status="isSuccess(grade,data.xz)"
              />
            </div>
            <div class="jd-content">
              <el-text class="jd-text-margin10">综合贡献</el-text>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="提示：基于作者整体资源质量、用户满意度、活跃度等加权计算作者对平台的综合贡献（该项分值从LV2开始计算)分数次日更新
用户删除资源，设置私密资源，发布盗版、侵权或违规资源时将被扣分。分数小于0，将显示负分。"
                  placement="bottom"
              >
                <el-icon class="icon-style">
                  <Warning/>
                </el-icon>
              </el-tooltip>
              <el-progress
                  :percentage="plan(grade,data.zh)"
                  :stroke-width="15"
                  :status="isSuccess(grade,data.zh)"
              />
            </div>
          </div>
          <div class="jd-sim jd-sim-jd-size">
            <div class="jd-content">
              <el-text class="jd-text-margin10">每周连续上传</el-text>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="提示：每周连续上传资源（审核通过）+10分，分数在连续上传后的次周一更新，该项分值从LV4开始计算"
                  placement="bottom"
              >
                <el-icon class="icon-style">
                  <Warning/>
                </el-icon>
              </el-tooltip>
              <el-progress
                  :percentage="plan(grade,data.xlsc)"
                  :stroke-width="15"
                  :status="isSuccess(grade,data.xlsc)"
              />
            </div>
          </div>
          <div class="jd-sim jd-sim-center jd-sim-btn-size">
            <el-button type="success" plain class="jd-uploading-btn">上传资源</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="next-grade-right">
      <div class="next-grid-box">
        <el-image class="dis-area-flex" :src="reach_select(true)"/>
        <div class="header-text">
          <el-text>实名认证</el-text>
        </div><br>
        <div class="sm-content ">
          <div class="icon-box">
            <el-icon size="40" color="#CCCCD8"><Avatar /></el-icon>
          </div>

          <el-button disabled>暂不需要</el-button>
        </div>
      </div>

      <div class="next-grid-box">
        <el-image class="dis-area-flex" :src="reach_select(true)"/>
        <div class="header-text">
          <el-text>原力等级</el-text>
        </div><br>
        <div class="sm-content">
          <el-text class="none-text">暂不需要</el-text>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "style/NextGrade";
</style>
